<template>
    <div>
        <div  style="display: flex;align-items: center;margin-top: 30px;margin-bottom: 30px;">
            <div style="margin-left: 30px;display: flex;align-items: center;">
                <div style="margin-right: 10px;">
                    起始时间
                </div>
            <el-date-picker
                v-model="value1"
                type="daterange"
                @change="handleDateChange"

                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
        </div>
    <div class="tab" style="display: flex;align-items: center;margin-left: 30px;">
            <div>短剧名称</div>
            <div class="tabSearch" style="display: flex;">
                <el-input style="margin: 0 10px ;" v-model="shortName" placeholder="请输入短剧名称" @input="orderNum"></el-input>
            </div>
        </div>
        </div>

        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="ID" align="center">

            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">

            </el-table-column>
            <el-table-column prop="create_time" label="创建时间" align="center">

            </el-table-column>
            <el-table-column prop="nickname" label="昵称" align="center">

            </el-table-column>
            <el-table-column prop="play_name" label="短剧名称" align="center">

            </el-table-column>

        </el-table>
        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    </div>

    
</template>

<script>
import { shortPlayList } from '../../../libs/api'
export default {
    data () {
        return {
            orderTime:'',
            value1:'',
            orderData:'',
            shortName:'',
            currentPage:1,
            PageSize:10,
            tableData:[],
            pageSizes: [5, 10],
            totalCount:1
        }
    },
    created() {
        this.getOrderList()
    },
    methods:{
        // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getOrderList()
    },
        // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getOrderList()
    },
        handleDateChange(value){
            console.log(value)
            // this.orderTime = value[0]+"_"+value[1]
            // console.log(this.orderTime)
            const newDate1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate();
            const newDate2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate();
            this.orderTime = newDate1+'_'+newDate2
            console.log(this.orderTime)
            this.getOrderList()
        },
        orderNum(){
            console.log(11)
            this.getOrderList()
        },
        getOrderList(){
            shortPlayList({
                page: this.currentPage,
                limit: this.PageSize,
                order_time:this.orderTime,
                name:this.shortName
            }).then(res=>{
                console.log(res)
                this.tableData = res.data.list
                this.totalCount = res.data.total
            })
        },
    }
}
</script>

<style>

</style>